<template>
  <div>
    <ul
      class="el-scrollbar__view el-select-dropdown__list context-menu"
      ref="contextMenu"
    >
      <li
        class="el-select-dropdown__item"
        v-for="menu in menus"
        :key="menu.key"
        v-show="menu.flag"
        @click="handleClick(menu)"
      >
        {{ menu.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import eventBus from '../../utils/eventBus'
export default {
  props: {
    iseditable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      page: {},
      graph: {},
      menus: [
        { key: 1, name: '编辑', flag: true },
        // { key: 2, name: '详情', flag: true },
        { key: 4, name: '节点关系', flag: true },
        { key: 3, name: '删除', flag: true }
      ],
      selectedItem: [],
      editor: null,
      command: null
    }
  },
  created() {},
  mounted() {
    this.init()
    this.bindEvent()
    // if (this.iseditable) {
    //   this.menus[0].flag = true
    //   // this.menus[1].flag = true
    //   this.menus[2].flag = true
    // } else {
    //   this.menus[0].flag = false
    //   this.menus[2].flag = false
    // }
  },
  methods: {
    init() {
      const { editor, command } = this.$parent
      this.editor = editor
      this.command = command
    },
    bindEvent() {
      let self = this
      eventBus.$on('afterAddPage', page => {
        self.page = page
        self.graph = self.page.graph
      })
      eventBus.$on('contextmenuClick', e => {
        e.preventDefault()
        const menu = this.$refs.contextMenu
        menu.style.left = e.canvasX + 'px'
        menu.style.top = e.canvasY + 'px'
        menu.style.display = 'block'
        this.selectedItem = this.graph.findAllByState('node', 'selected')
        this.selectedItem = this.selectedItem.concat(
          ...this.graph.findAllByState('edge', 'selected')
        )
      })
      eventBus.$on('mousedown', () => {
        const menu = this.$refs.contextMenu
        menu.style.display = 'none'
      })
    },
    handleClick(item) {
      const data = {
        state: true
      }
      // 编辑
      if (item.key === 1) {
        data.title = '编辑节点'
        this.$emit('getMenuData', data)
      }
      // 详情
      else if (item.key === 2) {
        data.title = '节点详情'
        this.$emit('getMenuData', data)
      }
      // 删除
      else if (item.key === 3) {
        if (this.selectedItem.length === 0) {
          return this.$message.warning('未捕获到删除的节点')
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          this.command.executeCommand('delete', this.selectedItem)
          this.selectedItem = []
        })
      }
      // 查看节点关系
      else if (item.key === 4) {
        if (this.selectedItem.length === 0) {
          return
        }
        const item = this.selectedItem[0].getModel()
        this.$bus.$emit('showNodeRelation', item)
        this.$message.warning('正在查询节点关系')
      }
      const menu = this.$refs.contextMenu
      menu.style.display = 'none'
    }
  }
}
</script>

<style>
.editor {
  position: relative;
}
.context-menu {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-color: black;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 5px 0;
  z-index: 12;
  display: none;
}

.context-menu li {
  cursor: pointer;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
}

.context-menu li:hover {
  background-color: rgba(238, 238, 238, 0.55);
}
</style>
